/**
 * 炫酷登录按钮组件
 */

import React from 'react';
import { history } from '@umijs/max';
import { useUserIdentity } from '@/hooks';
import styles from './index.less';

const AnimatedLoginButton: React.FC = () => {
  const identity = useUserIdentity();

  // 如果已登录，不显示登录按钮
  if (identity.isLoggedIn) {
    return null;
  }

  const handleClick = () => {
    history.push('/login');
  };

  return (
    <button className={styles.button} onClick={handleClick}>
      <span className={styles.buttonBg}>
        <span className={styles.buttonBgLayers}>
          <span className={`${styles.buttonBgLayer} ${styles.layer1}`}></span>
          <span className={`${styles.buttonBgLayer} ${styles.layer2}`}></span>
          <span className={`${styles.buttonBgLayer} ${styles.layer3}`}></span>
        </span>
      </span>
      <span className={styles.buttonInner}>
        <span className={styles.buttonInnerStatic}>登录</span>
        <span className={styles.buttonInnerHover}>登录</span>
      </span>
    </button>
  );
};

export default AnimatedLoginButton;






